<template>
  <div class="YcomTabBarPc" >
    <div class="YcomTabBarPc-logo" y-flexX>
      <div class="YcomTabBarPc-logo-wrap" >
        <YcomLogo>
          <div class="YcomTabBarPc-logo-content" y-flexY theme>
              <span>{{t1}}</span>
              <span>{{t2}}</span>
          </div>
        </YcomLogo>
      </div>
      <!-- <div class="logoText"> -->
        <slot>后台管理系统</slot>
      <!-- </div> -->
    </div>
    <ul y-side y-side2>
      <template v-for="(item, index) in list" :key="index">
        <li y-flexX theme3 @click="handlerClickOne(index, item)" :class="{ activeitem: index === active, reloadText: index === active && reloadText }">
          <div v-if="item.icon === 'user'" class="y-com-tab-user y-com-tab-icon"></div>
          <div v-if="item.icon === 'label'" class="y-com-tab-label y-com-tab-icon"></div>
          <div v-if="item.icon === 'test'" class="y-com-tab-test y-com-tab-icon"></div>
          <div v-if="item.icon === 'test2'" class="y-com-tab-test y-com-tab-test2 y-com-tab-icon"></div>
          <div v-if="item.icon === 'data'" class="y-com-tab-data y-com-tab-icon"><li></li> <li></li> <li></li> </div>
          <div v-if="item.icon === 'company'" class="y-com-tab-company y-com-tab-icon"><li></li> <li></li> <li></li> </div>
          <div v-if="item.icon === 'mes'" class="y-com-tab-mes y-com-tab-icon"><li></li> <li></li> <li></li> </div>
          <div v-if="item.icon === 'hot'" class="y-com-tab-hot y-com-tab-icon"><li></li> <li></li> <li></li> <li></li> </div>
          {{item.text}}
        </li>
        <div class="line" v-if="index !== list.length-1"></div>
      </template>
    </ul>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import YcomLogo from '../YcomLogo/YcomLogo.vue'
export default {
  name: 'YcomTabBarPc',
  props: {
    t1: {
      type: String,
      default: '三河招聘'
    },
    t2: {
      type: String,
      default: ''
    },
    reloadText: {
      type: Boolean,
      default: false
    },
    activeOne: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default () {
        return [
          {
            text: '角色管理',
            icon: 'user'
          },
          {
            text: '类别设置',
            icon: 'label'
          },
          {
            text: '审核管理',
            icon: 'test'
          },
          {
            text: '数据管理',
            icon: 'data'
          }
        ]
      }
    }
  },
  setup (props, context) {
    const active = ref(props.activeOne)
    let YTimer = null
    function handlerClickOne (index, item) {
      const YNum = 200
      if (YTimer) {
        window.$Ycom.$emit('y-com-newtip-addone', ['请勿频繁操作', 6000, 'err'])
        clearTimeout(YTimer)
        YTimer = null
        YTimer = setTimeout(() => {
          clearTimeout(YTimer)
          YTimer = null
        }, YNum)
        return
      }
      YTimer = setTimeout(() => {
        clearTimeout(YTimer)
        YTimer = null
      }, YNum)
      active.value = index
      context.emit('change', item)
    }
    return {
      handlerClickOne,
      active
    }
  },
  components: { YcomLogo }
}
</script>

<style scoped>
.YcomTabBarPc{
  width: 100%;
  height: 100%;
  padding-top: 1%;
  box-sizing: border-box;
  user-select: none;
  position: relative;
  overflow: hidden;
  --y-com-hight-control4: 5vw;
  --y-com-fontSize-Big: .93vw;
  position: relative;
  z-index: 1;
  /* --y-com-width-percent: 92%; */
  --y-com-themeborderColor33: var(--y-com-themeborderColor2);
}
/* .YcomTabBarPc::after{
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  background-color: var(--y-com--theme);
  filter: blur(4vw);
  width: 60%;
  padding-top: 60%;
  opacity: .15;
  border-radius: 50%;
  animation: y-com-bar-move1 9s infinite;
  z-index: 0;

}
.YcomTabBarPc::before{
  content: '';
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-50%, -50%);
  background-color: var(--y-com--theme);
  filter: blur(4vw);
  width: 70%;
  padding-top: 70%;
  opacity: .15;
  animation: y-com-bar-move2 9s infinite  reverse;
  z-index: 0;
} */
.YcomTabBarPc-logo{
  position: relative;
  z-index: 2;
  width: var(--y-com-width-percent);
  height: calc(var(--y-com-hight-control4) * 1.2);
  margin: var(--y-com-margin0) auto;
  box-sizing: border-box;
  padding: 5% 2% 1%;
  /* justify-content: flex-start; */
  /* background-color: #fff; */
}
.YcomTabBarPc-logo-wrap{
  height: calc(var(--y-com-hight-control4) * .9);
  width: calc(var(--y-com-hight-control4) * .9);
  transition: var(--y-com-transition0);
  margin-right: 10%;
  border-radius: 50%;
}
.YcomTabBarPc-logo-wrap:hover{
  transform: scale(1.1);
}
.YcomTabBarPc-logo-content{
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius: 50%;
  opacity: .8;
}
@keyframes y-com-bar-move1 {
  100%,0%{
    border-radius: var(--y-com-radius-fancy1);
  }
  40% {
    border-radius: var(--y-com-radius-fancy2) ;
    width: 110%;
    padding-top: 110%;
    top: 50%;
    left: 70%;
  }
  70%{
    top: 20%;
    left: 10%;
    width: 70%;
    padding-top: 70%;
    border-radius: var(--y-com-radius-fancy3) ;
  }
}
@keyframes y-com-bar-move2 {
  100%,0%{
    border-radius: var(--y-com-radius-fancy1);
  }
  40% {
    border-radius: var(--y-com-radius-fancy2) ;
    width: 110%;
    padding-top: 110%;
    top: 50%;
    left: 100%;
  }
  70%{
    top: 70%;
    left: 0%;
    width: 70%;
    padding-top: 70%;
    border-radius: var(--y-com-radius-fancy3) ;
  }
}
.YcomTabBarPc>ul {
  height: calc(100% - var(--y-com-hight-control4) * 1.4 - var(--y-com-margin0) * 2);
  /* background-color: #fff; */
  box-sizing: border-box;
  padding: 0% 8% 0;
  position: relative;
  z-index: 2;
  transition: var(--y-com-transition0);
  padding-top: 4%;
}
.YcomTabBarPc>ul>li {
  font-size: var(--y-com-fontSize-Big);
  height: calc(var(--y-com-hight-control4) * .74);
  width: var(--y-com-width-percent);
  transition: var(--y-com-transition0);
  margin: 0% auto;
  border-radius: var(--y-com-radius0);
  justify-content: flex-start;
  padding-left: 14%;
  box-sizing: border-box;
  cursor: pointer;
}
.YcomTabBarPc>ul>li:hover{
  /* height: calc(var(--y-com-hight-control4) * 1.3); */
  width: calc(var(--y-com-width-percent) * 1.1);
}
.y-com-tab-icon {
  /* background: #000; */
  width: calc(var(--y-com-fontSize-Big) * 1.5);
  height: calc(var(--y-com-fontSize-Big) * 1.5);
  margin-right: calc(var(--y-com-fontSize-Big) * 2);
  position: relative;
  z-index: 10;
  transition: var(--y-com-transition0);
}
.y-com-tab-icon:hover{
  transform: rotate(45deg) scale(1.2);
}
.line{
  width: 70%;
  height: 1px;
  /* background-color: var(--y-com-themeborderColor); */
  margin: 1.5% auto ;
}
.activeitem{
  background-color: var(--y-com--theme) !important;
  --y-com-themeborderColor2: var(--y-com--theme);
  opacity: .9;
  color: white;
  --y-com-themetextColor: white;
  width: calc(var(--y-com-width-percent) * 1.05) !important;
}
.activeitem .y-com-tab-icon{
  animation: activeone .5s;
}
@keyframes activeone {
  50% {
    transform: rotate(45deg) scale(1.4);
  }
}
</style>

<style scoped>
.y-com-tab-user{
  overflow: hidden;
  border-radius: 15%;
  /* background-color: rgba(138, 138, 138, 0.151); */
}
.y-com-tab-user::after{
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, 0);
  width: 55%;
  height: 55%;
  border-radius: 10vw;
  background-color: var(--y-com-themetextColor);
}
.y-com-tab-user::before{
  content: '';
  position: absolute;
  bottom: -25%;  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 70%;
  border-radius: 10vw 10vw;
  background-color: var(--y-com-themetextColor);
}
.y-com-tab-label{
  overflow: hidden;
}
.y-com-tab-label::after{
  content: '';
  position: absolute;
  top: 15%; left: 30%;
  transform: translate(-50%, 0) ;
  width: 30%;
  height: 30%;
  border-radius: 10vw;
  background-color: var(--y-com-themeborderColor2);
  /* background-color:  var(--y-com--theme); */
  z-index: 2;
}
.y-com-tab-label::before{
  content: '';
  position: absolute;
  bottom: 30%;  left: 35%;
  transform: translate(-50%, 0) rotate(45deg);
  width: 120%;
  height: 70%;
  background-color: var(--y-com-themetextColor);
}
.y-com-tab-test{
  border-radius: 20%;
  background-color: var(--y-com-themetextColor);
  position: relative;
}
.y-com-tab-test::after{
  content: '';
  position: absolute;
  top: 55%; left: 13%;
  transform: translate(0%, -50%) rotate(45deg) ;
  width: 40%;
  height: 15%;
  border-radius: 2px;
  background-color: var(--y-com-themeborderColor2);
  /* background-color:  var(--y-com--theme); */
  z-index: 2;
}
.y-com-tab-test::before{
  content: '';
  position: absolute;
  top: 44%;  left: 37%;
  transform: translate(0% , -50%) rotate(-45deg);
  width: 50%;
  height: 15%;
  border-radius: 2px;
  background-color: var(--y-com-themeborderColor2);
}
.y-com-tab-data{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.y-com-tab-data>li {
  height: 24%;
  width: 100%;
  border-radius: 5px;
  background-color: var(--y-com-themetextColor);
}
.y-com-tab-company{
  display: flex;
  justify-content:space-around;
  align-items: center;
  flex-direction: column;
  transform: scale(1.2);
  background-color: var(--y-com-themetextColor);
  border-radius: 1vw;
  overflow: hidden;
  /* border-radius: 35% 65% 63% 37% / 47% 36% 64% 53%  ; */
}
.y-com-tab-company>li {
  height: 7%;
  width: 100%;
  transform: rotate(-45deg);
  border-radius: 5px;
  background-color: var(--y-com-themeborderColor2);
}
.y-com-tab-mes{
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
  background-color: var(--y-com-themetextColor);
  /* border-radius: 50%; */
  border-radius: .6vw;
  /* border-bottom-left-radius: 0; */
  width: calc(var(--y-com-fontSize-Big) * 2);
  height: calc(var(--y-com-fontSize-Big) * 1.4);
  margin-left: -1.8%;
  margin-bottom: 1.5%;
  margin-right: calc(var(--y-com-fontSize-Big) * 1.7);

}
.y-com-tab-mes::after{
  content: '';
  position: absolute;
  top: 95%;
  left: 15%;
  border: var(--y-com-themetextColor) .6vw solid;
  border-top: none;
  border-bottom: rgba(255, 255, 255, 0) .4vw solid;
  border-right: rgba(255, 255, 255, 0) .4vw solid;
  transition: var(--y-com-transition0);
}
.y-com-tab-mes>li {
  height: .3vw;
  width: .3vw;
  border-radius: 5px;
  margin: 0 3%;
  background-color: var(--y-com-themeborderColor2);
}
.reloadText{
  position: relative;
  overflow: hidden;
}
/* .reloadText:hover{
  --y-com-themeborderColor2: var(--y-com-themeborderColor33) !important;
} */
.reloadText::after{
  content: '刷新';
  position: absolute;
  display: grid;
  place-items: center;
  /* background-color: var(--y-com-themeborderColor33); */
  background-color: var(--y-com--theme);
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  transition: var(--y-com-transition0);
}
.reloadText:hover::after{
  opacity: 1;
  left: 0;
}
.y-com-tab-test2{
  border-radius: 50%;
  width: calc(var(--y-com-fontSize-Big) * 1.8);
  height: calc(var(--y-com-fontSize-Big) * 1.8);
  margin-left: -1.5%;
  margin-right: calc(var(--y-com-fontSize-Big) * 1.9);
}
.y-com-tab-test2::after{
  content: '';
  position: absolute;
  top: 45%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) ;
  width: 30%;
  height: 30%;
  border-radius: 2px;
  border: 3px var(--y-com-themeborderColor2) solid ;
  border-bottom:  none;
  border-right:  none;
  background-color: rgba(255, 255, 255, 0);
  z-index: 2;
}
.y-com-tab-test2::before{
  content: '';
  position: absolute;
  top: 55%;  left: 50%;
  transform: translate(-50% , -50%);
  width: 3px;
  height: 50%;
  border-radius: 2px;
  background-color: var(--y-com-themeborderColor2);
}
.y-com-tab-hot{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: center;
  flex-direction: column;
}
.y-com-tab-hot>li {
  padding-top: 40%;
  width: 40%;
  border-radius: 2px;
  background-color: var(--y-com-themetextColor);
}
</style>
